<template>

    <el-form label-width="120px" label-position="left">
        <el-form-item label="小程序名称">
            <el-input v-model="setting_data.xcx.shop_name"></el-input>
        </el-form-item>
        <el-form-item label="APP ID">
            <el-input v-model="setting_data.xcx.app_id"></el-input>
        </el-form-item>
        <el-form-item label="APP SECRET">
            <el-input v-model="setting_data.xcx.app_secret"></el-input>
        </el-form-item>
        <el-form-item label="商户 ID">
            <el-input v-model="setting_data.xcx.mch_id"></el-input>
        </el-form-item>
        <el-form-item label="商户 支付秘钥">
            <el-input v-model="setting_data.xcx.mch_key"></el-input>
        </el-form-item>

        <el-form-item label="V3支付证书">
            <el-upload 
                class="upload-demo"
                ref="upload"
                :action="upload_url_v3_key_pem"
                :before-upload="beforeUpload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleKeySuccess"
                :limit="1"
                :data="{token:token}"
                >
                <el-button type="primary">请上传微信V3支付证书：apiclient_key.pem</el-button>
                <span>{{ setting_data.xcx.apiclient_key_pem }}</span>
                <!-- <template #tip>
                    <div class="el-upload__tip">
                    </div>
                </template>     -->
            </el-upload>
        </el-form-item>

        <el-form-item label="V3支付证书">
        
            <el-upload 
                class="upload-demo"
                ref="upload"
                :action="upload_url_v3_cert_pem"
                :before-upload="beforeUpload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleCertSuccess"
                :limit="1"
                :data="{token:token}">
                <el-button type="primary">请上传微信V3支付证书：apiclient_cert.pem</el-button>
                <span>{{ setting_data.xcx.apiclient_cert_pem }}</span>
                <template #tip>
                    <div class="el-upload__tip">
                    </div>
                </template>    
            </el-upload>

        </el-form-item>

        <!-- <el-form-item label="腾讯位置服务KEY" label-width="150px"> -->
        <el-form-item label="腾讯位置服务KEY" label-width="120">
            <el-input v-model="setting_data.xcx.location_key"></el-input>
        </el-form-item>
        <el-form-item label="侧边栏浮动导航">
            <el-switch v-model="setting_data.xcx.float_nav_show" active-value="1" inactive-value="0">
            </el-switch>
        </el-form-item>
    </el-form>
</template>  

<script lang="ts" setup>

import { inject, ref } from 'vue';
import { ElMessage } from 'element-plus';

const setting_data:any = inject('setting_data')
const VITE_URL = window.VITE_URL;

const upload_url_v3_cert_pem = VITE_URL + '/admin.FileUpload/v3_cert_pem';
const upload_url_v3_key_pem = VITE_URL + '/admin.FileUpload/v3_key_pem';
const token:string = localStorage.getItem('token');



const beforeUpload = ( params:any )=>{
    console.log( params )
    if( params.name.indexOf('.pem') < 0 ){

        ElMessage({
            message: '上传失败, 文件类型不匹配',
            type:  'error',
            duration: 1000,
        })
        return false;
    }
}

const handlePreview = ()=>{

}

const handleRemove = ()=>{
    
}

const handleKeySuccess = ( params:any ) => {
    // console.log( params )
    setting_data.value.xcx.apiclient_key_pem = params;
}

const handleCertSuccess = ( params:any ) => {
    // console.log( params )
    setting_data.value.xcx.apiclient_cert_pem = params;
}
</script>